 //页面中的数据
 var data = [
    {id: 1, name: "维修手册", num: '14', updateTime: '2022-8-22'},
    {id: 2, name: "维修手册", num: '43', updateTime: '2022-8-22'},
    {id: 3, name: "维修手册", num: '78', updateTime: '2022-8-22'},
    {id: 4, name: "维修手册", num: '24', updateTime: '2022-8-22'},
    {id: 5, name: "重型坦克", num: '45', updateTime: '2022-8-22'},
    {id: 6, name: "重型坦克", num: '13', updateTime: '2022-8-22'},
    {id: 7, name: "重型坦克", num: '45', updateTime: '2022-8-22'},
    {id: 8, name: "维修手册", num: '46', updateTime: '2022-8-22'},
    {id: 9, name: "重型坦克", num: '35', updateTime: '2022-8-22'},
    {id: 10, name: "维修手册", num: '23', updateTime: '2022-8-22'},
    {id: 11, name: "重型坦克", num: '75', updateTime: '2022-8-22'},
    {id: 12, name: "维修手册", num: '24', updateTime: '2022-8-22'},
    {id: 13, name: "重型坦克", num: '45', updateTime: '2022-8-22'},
    {id: 14, name: "重型坦克", num: '13', updateTime: '2022-8-22'},
    {id: 15, name: "重型坦克", num: '45', updateTime: '2022-8-22'},
    {id: 16, name: "维修手册", num: '46', updateTime: '2022-8-22'},
    {id: 17, name: "维修手册", num: '43', updateTime: '2022-8-22'},
    {id: 18, name: "维修手册", num: '78', updateTime: '2022-8-22'},
    {id: 19, name: "维修手册", num: '24', updateTime: '2022-8-22'},
];
//当前的页码
var page = 1;
//每页的条数
var count = 10;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//获取上一页的按钮
var oPrevBtn = document.querySelector('#paginationLeft');
//获取下一页的按钮
var oNextBtn = document.querySelector('#paginationRight');
// 添加
var oAddBtn = document.querySelector('.add-classify');
var oConfirmAdd = document.querySelector('.confirmAdd');
// 修改
var oConfirmEdit = document.querySelector('.confirmEdit');
// 删除
var oConfirmDel = document.querySelector('.confirmDel');
// 获取日期
var oDate = new Date();
var year = oDate.getFullYear();
var month = oDate.getMonth()+1;
var day = oDate.getDate();
var delId = 0;
//页面初始化的渲染功能
function render() {
    //让table为空
    oTBody.innerHTML = '';
    //根据count和page准备要渲染的数据
    var renderArr = data.slice((page - 1) * count, page * count);
    //循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
        //创建tr
        var oTr = document.createElement('tr');
        //给tr创建内容
        oTr.innerHTML = `
        <td class = 'serial-number'>${renderArr[i].id}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].num}</td>
        <td>${renderArr[i].updateTime}</td>
        <td>
        <button class="btn  btn-primary edit">编辑</button>
        <button class="btn btn-danger del">删除</button>
        </td> 
    `;
        //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }

    //渲染页码
    //找到所有的1，2，3，4的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for(var i=0;i<aPageBtn.length;i++){
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
function prev(){
    if(page>1){
        page--;
        render();
    }
}
function next(){
    if(page<Math.ceil(data.length / count)){
        page++;
        render();
    } 
}

// 添加功能
oAddBtn.addEventListener('click',addFn);
function addFn(){
    $('#addModal').modal('show');
    oConfirmAdd.addEventListener('click',addContentFn)
}
function addContentFn(){
    var addName = document.querySelector('.addDataName').value.trim();
    var addNum = document.querySelector('.addDataNum').value.trim();
    var addUpdate = year+'-'+month+'-'+day;
    if(addName != '' && addNum != ''){
        for(var i=0;i<data.length;i++){
            var addId = data[i].id + 1;
        }
        data.push({
            id:addId,
            name:addName,
            num:addNum,
            updateTime:addUpdate,
        });
    }
    $('#addModal').modal('hide');
    render();
}
// 编辑功能
oTBody.addEventListener('click',editFn);
function editFn(){
    if(event.target.className.includes('edit')){
        $('#editModal').modal('show');
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for(var i=0;i<data.length;i++){
            if(data[i].id == id){
                document.querySelector('.editDataId').value = data[i].id;
                document.querySelector('.editDataName').value = data[i].name;
                document.querySelector('.editDataNum').value = data[i].num;
            }
        }
    }
}
oConfirmEdit.addEventListener('click',editContentFn);
function editContentFn(){
    //看替换的是哪一条；
    var id = document.querySelector('.editDataId').value;
    //循环数据，找到对应的进行更改
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
            data[i].name = document.querySelector('.editDataName').value;
            data[i].num = document.querySelector('.editDataNum').value;
            data[i].updateTime = year+'-'+month+'-'+day;
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    //重新渲染
    render();
}
//删除功能
oTBody.addEventListener('click',delFn);
function delFn(){
    if(event.target.className.includes('del')){
        $('#delModal').modal('show');
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for(var i=0;i<data.length;i++){
            if(data[i].id == id){
                document.querySelector('.delDataId').value = data[i].id;
            }
        }
        //重新渲染
        render();
    }
}
oConfirmDel.addEventListener('click',delContentFn);
function delContentFn(){
    var id = document.querySelector('.delDataId').value;
    //循环数据，找到对应的进行更改
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
            data.splice(i,1);
        }
    }
    //关闭弹框
    $('#delModal').modal('hide');
    //重新渲染
    render();
}
